<template>
  <view class="bjys">
    <view class="tuichu" @click="tuichuBtn()">
      <image src="@/static/img/tc.png" mode="widthFix"></image>
    </view>
    <view class="icon-img">
      <image class="img1" :src="'https://www.tmtv777.com/' + userList.upic" mode="widthFix"></image>
      <image class="img2" :src="'https://www.tmtv777.com/' + userList.uvip" mode="widthFix"></image>
    </view>
    <view class="userlist">
      <view class="userlist_num">{{userList.uid}}</view>
      <view class="userlist_time">{{userList.utime}}</view>

      <view class="userlist_d" @click="changeBtn(1)">
        <p class="userlist_p">{{userList.ucs}}</p>
        <p class="userlist_p">次数<span @click="wenhao">?</span></p>
      </view>
      <view class="userlist_d" @click="changeBtn(2)">
        <p class="userlist_p">{{userList.ushare}}</p>
        <p class="userlist_p">推广</p>
      </view>
    </view>
    <!-- 基本功能 -->
    <view class="u_content">
      <view class="u_content_tit">
        基本功能
      </view>
      <view class="u_co_box">
        <navigator url="/pages/my/pass" class="indexbox4">
          <image src="@/static/img/pass.png" mode="widthFix"></image>
          <!-- <img src="@/pages/assets/img/pass.png" alt=""> -->
          <p>修改密码</p>
        </navigator>
        <navigator url="../collect" class="indexbox4">
          <image src="@/static/img/user_collect.png" mode="widthFix"></image>
          <p>我的收藏</p>
        </navigator>
        <navigator url="/pages/my/buycard" class="indexbox4">
          <image src="@/static/img/card2.png" mode="widthFix"></image>
          <p>自助购卡</p>
        </navigator>
        <navigator url="/pages/my/upayjl" class="indexbox4">
          <image src="@/static/img/pay.png" mode="widthFix"></image>
          <p>消费记录</p>
        </navigator>
      </view>
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/card.png" mode=""></image>
        <input type="text" maxlength="40" placeholder="请输入卡密" v-model="card" />
        <button class="button" @click="cardjhBtn()">激活</button>
      </view>
      <view class="u_collect_inp">
        <view>客服微信：{{ mydl.dlwx||'' }}</view>
        <button class="button2" @click="copy(mydl.dlwx)">复制</button>
      </view>
      <view class="u_collect_inp">
        <view>客服qq：{{ mydl.dlqq||'' }}</view>
        <button class="button2" @click="copy(mydl.dlqq)">复制</button>
      </view>
    </view>
    <!-- 其他功能 -->
    <view class="u_content">
      <view class="u_content_tit">
        其他功能
      </view>
      <view class="u_co_box">
        <navigator url="/pages/my/usharejl" class="indexbox4">
          <image src="@/static/img/yqm.png" mode=""></image>
          <!-- <img src="@/pages/assets/img/pass.png" alt=""> -->
          <p>推广记录</p>
        </navigator>
        <navigator url="/pages/my/fankui" class="indexbox4">
          <image src="@/static/img/fan.png" mode="widthFix"></image>
          <p>留言卡片</p>
        </navigator>
        <navigator url="/pages/my/ufankuijl" class="indexbox4">
          <image src="@/static/img/myxx2.png" mode="widthFix"></image>
          <p>系统回复</p>
        </navigator>
      </view>
    </view>
    <!-- 播放历史 -->
    <!-- 基本功能 -->
    <view class="u_content">
      <view class="u_content_tit u_content_tit2">
        <view>播放历史</view>
        <view @click="historBtn()" class="span_con">更多></view>
      </view>
      <scroll-view style="white-space: nowrap;height: 300rpx;" scroll-x scroll-with-animation>

        <view class="indexbox" :style="{'width':parseInt(vidoList.length) * 51 +'%'}">
          <view class="indexbox_left" v-for="(item,index) in vidoList" :key="index" @click="playBtn(item)">
            <view class="VIP_img" v-if="item.vod_vip == 2">
              VIP
            </view>
            <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }">
            </view>
            <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
            </view>
            <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
              @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
            <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else
              @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
            <!-- <view class="videoBox-bottom">
              <view class="vib_left">
                <image src="@/static/img/e.png" mode=""></image>
                <span>{{count}}</span>
              </view>
              <view class="vib_right">
                <image src="@/static/img/e.png" mode=""></image>
                <span>2021-11-23</span>
              </view>
            </view> -->
            <view class="inl_content">{{ item.vod_name }}</view>
          </view>
        </view>
      </scroll-view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello Word',
        userList: [],
        password: '',
        card: '',
        vidoList: [],
        mydl: [],
        scztList: [],
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        count: 0
      }
    },
    onLoad() {
      uni.showLoading({
        title: '加载中'
      })
      setTimeout(() => {
        uni.hideLoading();
      }, 500)
      this.scztList = uni.getStorageSync('vod_id') || [];
    },
    onShow() {
      this.$http.mydaili({
        id: uni.getStorageSync('token')
      }).then(res => {
        if (res.code == 200) {
          this.mydl = res.mydl[0];
        }
      })
      let token = uni.getStorageSync('token') || 'none';
      if (token == 'none') {
        uni.showModal({
          title: '提示',
          content: "请登录！",
          success: function(res) {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/login/index'
              });
            }
          }
        })
      }
      this.uplayjlList();
      this.$http.usersList({
        id: uni.getStorageSync('token')
      }).then(res => {
        if (res.code == 200) {
          this.userList = res.data.users[0];
        }
      })
    },
    methods: {
      copy(value) {
        //提示模板
        uni.showModal({
          content: value, //模板中提示的内容
          confirmText: '复制内容',
          showCancel: false,
          success: () => { //点击复制内容的后调函数
            //uni.setClipboardData方法就是讲内容复制到粘贴板
            uni.setClipboardData({
              data: value, //要被复制的内容
              success: () => { //复制成功的回调函数
                uni.showToast({ //提示
                  title: '复制成功'
                })
              }
            });
          },
        })
      },
      historBtn() {
        uni.navigateTo({
          url: '/pages/historey'
        })
      },
      cardjhBtn() {
        this.$http.cardjh({
          card: this.card,
          id: uni.getStorageSync('token')
        }).then(res => {
          uni.showModal({
            title: res.msg
          })
        }).catch(err => {
          uni.showModal({
            title: err.msg
          })
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          let token = uni.getStorageSync('token') || 'none';
          if (token == 'none') {
            uni.showModal({
              title: '提示',
              content: "请登录！",
              success: function(res) {
                if (res.confirm) {
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }
              }
            })
          }
        })
      },
      tuichuBtn() {
        uni.showModal({
          title: '提示',
          content: "是否退出登录！",
          success: function(res) {
            uni.setStorageSync('token', '');
            uni.setStorageSync('share', '');
            uni.setStorageSync('phone', '');
            uni.setStorageSync('vod_id', '');
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/login/index'
              });
            }
          }
        })

      },
      playBtn(item) {
        uni.navigateTo({
          url: `../player?playid=${item.vod_id}`
        })
      },
      wenhao() {
        this.$toast('免费播放次数仅支持播放免费视频哦！每天0点后刷新，vip用户无限制！');
      },
      uplayjlList() {
        this.$http.uplayjl({
          token: uni.getStorageSync('token')
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = res.data.collectlist;
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .tuichu {
    position: relative;
    top: 10rpx;
    left: 85%;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 50rpx;
    align-items: center;

    image {
      width: 42rpx;
      height: 42rpx;
    }

  }

  .icon-img {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin: 120rpx auto 0;

    .img1 {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      bottom: -30rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }
  }

  .userlist {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: -30rpx auto 0;
    width: 94%;
    padding-bottom: 30rpx;
    min-height: 200rpx;
    background-color: #FFFFFF;
    border-radius: 40rpx;
    box-shadow: 0 4px 10px #e6e7e8;

    .userlist_num {
      margin-top: 65rpx;
      width: 100%;
      font-size: 40rpx;
      color: #465666;
      line-height: 50rpx;
      font-weight: bold;
      text-align: center;
    }

    .userlist_time {
      width: 100%;
      color: #949da5;
      font-size: 28rpx;
      line-height: 25rpx;
      text-align: center;
    }

    .userlist_d {
      margin-top: 30rpx;
      flex: 1;
      height: 100%;

      .userlist_p {
        color: #4f5e6d;
        font-size: 38rpx;
        text-align: center;
        line-height: 45rpx;
        font-weight: bold;

        span {
          color: #FFFFFF;
          padding: 0 10rpx;
          background-color: #848F99;
          border-radius: 50%;
        }
      }

      .user_heng {
        border-bottom: 8rpx solid #364758;
        display: block;
        width: 15%;
        margin: auto;
        border-radius: 50rpx;
      }
    }
  }

  .u_content {
    background-color: #fff;
    width: 94%;
    margin: 40rpx auto;
    border-radius: 20px;
    padding: 20rpx 0 10px 15rpx;
    box-shadow: 0 4px 10px #e6e7e8;
    box-shadow: 0 4px 10px #e6e7e8;

    .u_content_tit {
      color: #4c5666;
      font-size: 20px;
      margin-left: 15rpx;
    }

    .u_content_tit2 {
      display: flex;
      justify-content: space-between;

      .span_con {
        margin-right: 10px;
        color: #949da5;
        font-size: 14px;
      }
    }

    .u_co_box {
      display: flex;
      justify-content: space-around;

      .indexbox4 {
        flex: 1;
        text-align: center;

        image {
          width: 110rpx;
          height: 120rpx;
        }

        p {
          width: 100%;
          color: #949da5;
          text-align: center;
          font-size: 29rpx;
        }
      }
    }

    .u_collect_inp {
      margin-top: 20rpx;
      position: relative;
      padding-left: 20rpx;
      display: flex;
      height: 80rpx;
      justify-content: flex-start;
      align-items: center;
      background-color: #fff;
      padding-bottom: 10rpx;
      border-bottom: 1rpx solid #eff9ff;


      .u_img {
        margin-right: 15rpx;
        width: 44rpx;
        height: 40rpx;
      }

      .button {
        position: absolute;
        right: 25rpx;
        width: 160rpx;
        height: 80rpx;
        color: #fff;
        font-size: 28rpx;
        background: #4a4c5b;
        line-height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
      }
      
      .button2 {
        position: absolute;
        right: 25rpx;
        width: 160rpx;
        height: 80rpx;
        color: #fff;
        font-size: 28rpx;
        background: #bcc2c6;
        line-height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
      }

    }
  }

  .indexbox {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-start;
    // width: 800%;
    // margin-bottom: 60rpx;

    .indexbox_left {
      margin-left: 15rpx;
      position: relative;
      width: 350rpx;
      height: 276rpx;
      border-radius: 20rpx 20rpx 0 0;

      .inl_content {
        position: absolute;
        bottom: 0rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 225rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .indexbox_left {
    overflow: hidden;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 9;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }
</style>
